<template>
  <div class="report-work-table" :class="{ 'components-container': !params }">
    <div class="work-table-container">
      <Search
        :config.sync="searchConfig"
        :operationBtns="searchOperationBtns"
        :callback="searchCallBack"
        :tableQuery.sync="tableQuery"
      />

      <!-- 支持单选-->
      <div v-if="tableConfig.radioConfig && tableConfig.radioConfig.enable">
        <BaseTableRadio
          :tableQuery.sync="tableQuery"
          :config="tableConfig"
          :callback="tableCallBack"
        />
      </div>
      <div v-else>
        <BaseTable
          :tableQuery.sync="tableQuery"
          :config="tableConfig"
          :callback="tableCallBack"
        />
      </div>

      <!-- 添加工作表 -->
      <div v-if="addWorkPopShow">
        <AddWork @close="addWorkPopClose" />
      </div>

      <!-- 从SQL添加工作表 -->
      <div v-if="addWorkPopShowSQL">
        <AddWorkSQL @close="addWorkPopCloseSQL" />
      </div>

      <!-- 预览工作表 -->
      <div v-if="reviewPopShow">
        <Review
          @close="reviewPopShow = false"
          :work_table_id="work_table_id"
          :table_name="table_name"
          :alias="alias"
        />
      </div>

      <!-- 配置工作表 -->
      <div v-if="editPopShow">
        <Edit
          @close="editPopClose"
          :work_table_id="work_table_id"
          :table_name="table_name"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { confirmBox } from '@/utils/report/message'
import Search from '@/views/report/Components/Search/index'
import BaseTable from '@/views/report/Components/Table/table'
import BaseTableRadio from '@/views/report/Components/Table/tableRadio'
import AddWork from './components/addWork'
import AddWorkSQL from './components/addWorkSQL'
import Review from './components/review'
import Edit from './components/edit'
import { list, deleteWt } from '@/api/report/workTable'
import * as apiDatabase from '@/api/report/database'
const defaultPage = {
  limit: 10,
  current_page: 1
}
const defaultTableQuery = {
  database_id: '',
  search: ''
}

export default {
  data() {
    return {
      // 查询条件
      tableQuery: Object.assign({}, defaultTableQuery, defaultPage),
      searchConfig: [
        {
          field: 'database_id',
          label: '数据源',
          type: 'select',
          itemDataProps: {
            label: 'name',
            value: 'database_id'
          },
          data: []
        },
        {
          field: 'search',
          label: '关键字',
          type: 'input'
        }
      ],
      searchOperationBtns: {
        expand: {
          show: false
        }
      },

      // table基础组件
      tableConfig: {
        style: {},
        options: {},
        list: [],
        columns: [
          {
            prop: 'table_name',
            label: '工作表名称'
          },
          {
            prop: 'alias',
            label: '别名'
          },
          {
            prop: 'remark',
            label: '备注'
          },
          {
            prop: 'database',
            label: '数据源',
            formatter: row => {
              return row.database.name
            }
          },
          {
            prop: 'create_by',
            label: '添加用户'
          },
          {
            prop: 'create_at',
            label: '添加时间'
          }
        ],

        // 操作按钮组
        operationBtns: {
          width: '200px',
          fixed: 'right',
          show: true,
          callback: (action, $index, row, item) => {
            this.work_table_id = row.work_table_id
            this.table_name = row.table_name
            this.alias = row.alias
            if (action === 'Edit') {
              this.editPopShow = true
            }

            if (action === 'Review') {
              this.reviewPopShow = true
            }

            if (action === 'Delete') {
              this.deleteRecord(row)
            }
          },
          data: [
            {
              label: '配置',
              show: true,
              action: 'Edit'
            },
            {
              label: '预览',
              type: 'text',
              action: 'Review'
            },
            {
              label: '删除',
              type: 'text',
              action: 'Delete'
            }
          ]
        },

        // 操作提示
        tips: {
          text: ''
        },

        // 分页
        pagination: {
          show: true,
          total: 0
        }
      },

      // 显示添加工作表的弹窗状态
      addWorkPopShow: false,

      // 显示从SQL添加工作表的弹窗状态
      addWorkPopShowSQL: false,

      // 预览添加工作表的弹窗状态
      reviewPopShow: false,

      // 配置工作表的弹窗状态
      editPopShow: false,

      work_table_id: '',
      table_name: '',
      alias: ''
    }
  },
  props: ['params'],
  created() {
    this.init()
    this.getList()
    this.getDatabaseList()
  },
  mounted() {},
  computed: {},
  components: {
    Search,
    BaseTable,
    BaseTableRadio,
    AddWork,
    AddWorkSQL,
    Review,
    Edit
  },
  methods: {
    init() {
      let { searchOperationBtns, tableConfig } = this.params || {}
      if (searchOperationBtns) {
        Object.assign(this.searchOperationBtns, searchOperationBtns)
      }
      if (tableConfig) {
        Object.assign(this.tableConfig, tableConfig)
      }

      //console.log(this.tableConfig)
    },
    searchCallBack(action) {
      // 清空单选的值
      let { radioConfig } = this.tableConfig
      if (radioConfig) {
        radioConfig.value = ''
      }

      if (action === 'Add') {
        this.addWorkPopShow = true
      }

      if (action === 'AddSQL') {
        this.addWorkPopShowSQL = true
      }

      if (action === 'Search') {
        Object.assign(this.tableQuery, defaultPage)
        this.getList()
      }

      if (action === 'Reset') {
        Object.assign(this.tableQuery, defaultTableQuery, defaultPage)
        this.getList()
        Object.assign(this.tableConfig, { tips: { text: '' } })
      }
    },

    tableCallBack(action) {
      if (action === 'SizeChange') {
        this.getList()
      }
      if (action === 'CurrentChange') {
        this.getList()
      }
    },

    // 创建工作表关闭回调
    addWorkPopClose() {
      this.addWorkPopShow = false
      this.getList()
    },

    // 从SQL创建工作表关闭回调
    addWorkPopCloseSQL() {
      this.addWorkPopShowSQL = false
      this.getList()
    },

    // 配置工作表关闭回调
    editPopClose() {
      this.editPopShow = false
      this.getList()
    },

    // 获取列表
    getList() {
      list(this.tableQuery)
        .then(({ data }) => {
          let { list, total } = data
          this.tableConfig.list = list.map(item => {
            item.radioSelect = false
            return item
          })
          this.tableConfig.pagination.total = total
        })
        .catch(error => {
          Object.assign(this.tableConfig.tips, {
            text: error,
            type: 'error'
          })
        })
    },

    // 删除
    deleteRecord({ table_name, work_table_id }) {
      confirmBox(`${table_name}，基于该工作表配置的图表将无法正常查看`).then(
        () => {
          deleteWt({
            work_table_id: work_table_id
          })
            .then(data => {
              this.tableConfig.tips.text = data.message
              this.getList()
            })
            .catch(error => {
              this.tableConfig.tips.text = error
              console.log(error)
            })
        }
      )
    },

    // 获取数据源
    getDatabaseList() {
      apiDatabase
        .list({
          data: {}
        })
        .then(({ data }) => {
          let databaseList = this.searchConfig[0]
          Vue.set(
            this.searchConfig,
            0,
            Object.assign(databaseList, {
              data: data
            })
          )
        })
        .catch(error => {
          this.$message.error(error)
        })
    }
  }
}
</script>

<style lang="scss">
@import './less/index.scss';
</style>
